.container {
  display: flex;
  flex-direction: column;
  width: 100%;

  & > span {
    display: flex;
    align-items: center;
    margin-top: 8px;

    & > *:first-child {
      margin-right: 8px;
    }
  }
}

.keyboard-layout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;

  padding-right: 12px;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #434f54;
  background: #171e21;

  svg {
    path {
      fill: #c9d2d2;
    }
  }

  .dropdown-menu {
    top: 42px;
    left: -400px;
    max-height: 150px;
    width: 436px;
    overflow-y: auto;

    &::-webkit-scrollbar-thumb {
      border: 4px solid var(--dropdown-background);
    }
    &::-webkit-scrollbar-track {
      background-color: transparent;
    }
  }

  .input {
    border: none;
    background: none;
  }
}

.board-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px solid #434f54;
  background: #171e21;
  width: calc(100% - 26px);

  .board-name-label {
    position: unset;
    transform: unset !important;
    color: #c9d2d2 !important;

    span {
      font-size: 10px !important;
      font-weight: 600;
      letter-spacing: 0.1px;
    }
  }

  .board-name-container {
    width: 100%;
    height: 100%;
    background: transparent;
    color: #c9d2d2;
    border: none;
    outline: none;
    padding: unset;
    display: flex;
    flex-direction: row;

    &[class*="focused"] {
      box-shadow: none;
    }

    button {
      margin-top: -16px;
    }
  }

  .input-eye {
    position: unset;
    transform: unset;
  }

  &.focused {
    .board-name-container {
      border: none;
      box-shadow: unset;
    }
  }

  &.disabled {
    .board-name-container {
      background: transparent;
      opacity: 0.5;
    }
  }

  &:focus-within {
    border: 1px solid #25c2c7;
    background: rgba(37, 194, 199, 0.08);
    box-shadow: unset;
  }
}
