@use '../../styles/typography';

$toolbar-height: 30px;

:host {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;

  .main-toolbar {
    border-bottom: 1px solid var(--color-separator);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-inline: 0.1rem;
    box-sizing: border-box;

    .toolbar-btn {
      background: none;
      border: none;
      color: var(--secondary-contrast);
      padding-inline: 0.375rem;
      cursor: pointer;

      mat-icon {
        font-size: 20px;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
      }
    }

    .tools {
      display: flex;

      .inspector-active {
        color: var(--dynamic-blue-02);
      }
    }

    .frame-selector {
      width: 100px;
      margin: 0 0.5rem;
    }

    .tab-link {
      @extend %body-medium-01;
      min-width: unset;
      padding: 0 0.625rem;
      height: $toolbar-height;
    }

    .settings {
      flex: 1;
      display: flex;
      justify-content: end;
      align-items: center;
      height: 22px;

      .ver-ruler {
        margin-inline: 0.125rem;
        height: 80%;
      }
    }
  }

  .tab-content {
    position: relative;
    height: calc(100% - #{$toolbar-height + 1px});
  }
}

.menu-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

.version-label {
  cursor: default;
}