.studio-layer-timeline {
  height: 300px;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  overflow: hidden;
  z-index: 1;
  position: relative;
  $headerHeight: 40px;
  $timelineAnimationPadding: 20px;
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    list-style: none;
  }
  .slt-layers-list {
    z-index: 2;
  }
  .slt-layer-container {
    padding-top: 8px;
  }
  .slt-layer {
    box-sizing: border-box;
    line-height: 20px;
    height: 20px;
  }
  .slt-layers {
    width: 300px;
    position: relative;
    z-index: 3;
    user-select: none;
    flex: 0 0 auto;
    mat-icon {
      width: 16px;
      height: 16px;
      font-size: 16px;
    }
    .slt-layers-list-scroller {
      position: relative;
      overflow-x: hidden;
      overflow-y: auto;
      -ms-overflow-style: none;
      &::-webkit-scrollbar {
        display: none;
      }
    }
    .slt-layers-list {
      padding-left: 8px;
    }
    mat-menu {
      display: flex;
    }
    .slt-header {
      padding: 0 0 0 4px;
      overflow: hidden;
      .slt-layers-menu-group-button {
        position: relative;
        cursor: pointer;
        border: 0;
        height: $headerHeight;
        font-size: 12px;
        font-weight: 500;
        line-height: $headerHeight;
        padding: 0 8px 0 8px;
        margin: 0;
        outline: 0;
        background-color: transparent;
        &.is-disabled {
          cursor: default;
        }
      }
      button {
        &[mat-icon-button] {
          mat-icon {
            line-height: 0px;
          }
        }
        &[mat-icon-button][disabled] {
          mat-icon {
            line-height: 0px;
          }
        }
      }
    }
    .slt-layers-list-drag-indicator {
      position: absolute;
      height: 2px;
      left: 0;
      right: 0;
      margin-top: -1px;
      pointer-events: none;
      &::before {
        position: absolute;
        content: '';
        left: -4px;
        top: -3px;
        height: 8px;
        width: 8px;
        border-radius: 50%;
      }
    }
  }
  .slt-layers-empty {
    padding: 32px;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
  }
  .slt-timeline {
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    user-select: none;
    cursor: default;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    .slt-timeline-animation-scroller {
      position: relative;
      overflow-x: hidden;
      overflow-y: auto;
      -ms-overflow-style: none;
      &::-webkit-scrollbar {
        display: none;
      }
    }
    .slt-timeline-animation {
      position: relative;
      margin-left: 4px;
      box-sizing: content-box;
      width: 100px;
      overflow: hidden;
      flex: 0 0 auto;
      opacity: 1;
      &.is-disabled {
        opacity: 0.5;
      }
    }
    .slt-timeline-animation-rows {
      padding-top: 8px;
      padding-left: $timelineAnimationPadding;
      padding-right: $timelineAnimationPadding;
      z-index: 2;
    }
    .slt-timeline-grid {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }
    .slt-header {
      display: flex;
      flex-direction: column;
      margin: 0;
      .slt-timeline-animation-meta {
        height: $headerHeight / 2 - 4px;
        line-height: $headerHeight / 2 - 4px;
        margin: 2px -4px;
        padding: 0 4px;
        border-radius: 2px;
        cursor: pointer;
        outline: 0;
        align-self: flex-start;
        display: flex;
        flex-direction: row;
        &.is-disabled {
          cursor: default;
        }
      }
      .slt-timeline-animation-name {
        margin-right: 4px;
        font-weight: 500;
      }
      .slt-timeline-header-grid {
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 50%;
        z-index: 1;
        cursor: pointer;
      }
      mat-icon {
        width: 13px;
        height: 13px;
        font-size: 13px;
      }
      button {
        line-height: 16px;
        height: 16px;
        width: 16px;
        min-height: 16px;
        padding-left: 1.5px;
        padding-right: 1.5px;
        padding-top: 1px;
        padding-bottom: 1px;
        margin-left: 4px;
        &[mat-icon-button] {
          mat-icon {
            line-height: normal;
            vertical-align: top;
          }
        }
      }
    }
  }
  .slt-header {
    position: relative;
    flex: 0 0 auto;
    height: $headerHeight;
    box-sizing: border-box;
    width: 100%;
    font-size: 12px;
    line-height: $headerHeight;
    padding: 0 16px;
    z-index: 2;
  }
}

button {
  &[mat-menu-item] {
    input[type='file'] {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
      cursor: pointer;
      width: 0.1px;
      height: 0.1px;
    }
    ::-webkit-file-upload-button {
      cursor: pointer;
    }
  }
}
