@import ‘pygments/github.css’;

.glypto-model {

$_transition: 400ms ease-out 700ms;

transition: $_transition;
margin: 30px -10px 20px;
border: 1px solid $light-grey;
box-shadow: 0 0 0 3px #f6f6f6;

&:hover {
  box-shadow: none;
  border-color: transparent;

  &:before {
    opacity: 0;
  }
}

&:before {
  transition: $_transition;
  content: 'EXAMPLE';
  position: absolute;
  margin-top: -20px;
  margin-left: -4px;
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  color: #aaa;
  background: #f6f6f6;
  padding: 4px 15px;
}

&:last-child {
  margin-bottom: 0;
}

> .glypto-model-stage {
  position: relative;
  padding: 10px;

  & + .glypto-model-utils {
    transition: $_transition;
    transition-delay: 0;

    &:hover {
      transition: 120ms ease-out;
    }
  }

  &:hover + .glypto-model-utils {
    opacity: 0;
  }

  &:before {
    @include position(absolute, 0 0 0 0);
    @include size(100px 12px);
    content: 'Loading…';
    line-height: 12px;
    font-size: 12px;
    text-transform: uppercase;
    text-indent: 1em;
    color: #ddd;
    margin: auto;
  }

  > figure,
  > iframe {
    position: relative;
    display: block;
    margin: 0;
    background: white;
  }

  > figure {
    @include clearfix;
  }

  > iframe {
    transition: 200ms ease-out;
    width: 100%;
    height: 60px;
    opacity: 0;

    &[style*="height"] {
      opacity: 1;
    }
  }

  ._component {
    transition: 200ms max-width;
    overflow: hidden;
    padding: 5px;

    &.__small {
      max-width: 320px;
    }

    &.__medium {
      max-width: 640px;
    }

    &.__large {
      max-width: 1280px;
    }

    &.__default {
      max-width: 100%;
    }
  }
}

}